<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">
		#rili{
			width: 400px;
			overflow: hidden;
			padding: 0px;
		}
		li {
			list-style: none;
			height: 35px;
			width: 50px;
			background-color: black;
			color: white;
			float: left;
			text-align: center;
			font-size: 20px;

			padding: 15px 0px 0px 0px;
			margin: 3px;
		}
		#xuanze{
			font-size: 50px;
		}
	</style>
	<script>
		window.onload=function () {

			var myDate = new Date();
			myDate.setDate(1);
			updateDate(myDate);
		}
		function updateDate(myDate) {
			var elementById = document.getElementById("rili");
			var content = "<li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>";
			for (var i = 1; i <= 31; i++) {
				content = content + "<li>" + i + "</li>";
			}
			elementById.innerHTML = content;

			var day = myDate.getDay();
			console.log(day);
			var elementsByTagName = elementById.getElementsByTagName("li")[7];
			elementsByTagName.style.marginLeft = 56 * (day - 1)+3 + "px";
			console.log(myDate);

		}
		function update() {
			var value = document.getElementById("xuanze").value;
			console.log(value);
			var myDate = new Date();
			myDate.setDate(1);
			myDate.setMonth(value-1);
			updateDate(myDate);
		}
	</script>
</head>
<body>
<div>
	<input type="text" onchange="javascript:alert('响应了')" value="点击"/>
	<select id="xuanze" onchange="update()">
			<option value="1">一</option>
			<option value="2">二</option>
			<option value="3">三</option>
			<option value="4">四</option>
			<option value="5">五</option>
			<option value="6">六</option>
			<option value="7">七</option>
			<option value="8">八</option>
			<option value="9">九</option>
			<option value="10">十</option>
			<option value="11" >十一</option>
			<option value="12">十二</option>
	</select>
	<ul id="rili">

	</ul>
</div>

</body>
</html>